<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击我发送post请求的ajax</button>
  <script>
    // 点击按钮的时候 发送post形式的ajax请求
    // 和get的区别 ： 1. 方法 写成post 2.携带数据,通过请求体携带数据

    /*
        post发送给后端的数据类型 ： 
            1.默认是文本类型 ，文本格式没有要求 ，请求头部需要是text/plain -- 后端的接收是  bodyParser.text(); （使用不多）
            2.表单类型 ，文本需要 querystring 形式传递，请求头部需要设置成
    application/x-www-form-urlencoded ----后端接收 bodyParser.urlencoded({extended:false})
            3.json类型 ，客户端发过去的类型是json类型。文本需要json字符串，请求头部需要设置 content-type:application/json ---后端接收  bodyParser.json();
    
    */
    let btn = document.querySelector("button");
    btn.onclick = function () {
      let xhr = new XMLHttpRequest();
      xhr.open("post", "/postdata");
      // xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); // 设置请求头部
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify({ myname: "chengyu", age: 22 }));  // send里发送请求的具体数据
      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(xhr.responseText);
        }
      }
    }
     /*
    
    发送post数据
        1. 设置头部为 表单格式 (使用请求体发送querystring参数) ： 请求头设置成 application/x-www-form-urlencoded ----后端接收 bodyParser.urlencoded({extended:false})
        2.设置头部为 json格式（直接发送json数据） ：设置请求头部 成  application/json ---后端接收 boryParser.json();
    
    
    
    
    
    */
  </script>
</body>

</html>